<template>
  <div class="shop" v-loading="loading">
    <el-form :model="form" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="门店名称:" prop="shop_name">
        <p>{{ form.shop_name }}</p>
      </el-form-item>
      <el-form-item label="联系人:" prop="contact">
        <p>{{ form.contact }}</p>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone" type="number">
        <p>{{ form.phone }}</p>
      </el-form-item>
      <el-form-item label="用户账号" prop="uid">
        <p>{{ form.account }}</p>
      </el-form-item>

      <el-form-item label="小店地址" prop="address">
        <p>{{ form.address }}</p>
      </el-form-item>

      <!--v-if="(!resId && type == 2) || type == 1 "-->
      <el-form-item label="邀请者主账号" prop="invitation_mobile">
        <p>{{ form.invitation_mobile }}</p>
      </el-form-item>
      <el-form-item label="邀请者子账号" prop="invitation_operate_mobile">
        <p>{{ form.invitation_operate_mobile }}</p>
      </el-form-item>
      <div class="line"></div>

      <el-row class="picCol">
        <!--营业执照-->
        <el-col :span="6">
          <el-form-item label="营业执照:" prop="licence_img">
            <uploadImg
              v-if="form.licence_img !== ''"
              flieName="licence_img"
              class="icon_cate"
              :disabled="false"
              :oldImgs="[form.licence_img]"
              :n="1"
              @getFile="getFile"
            />
            <span v-else>暂无</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="店主身份照:">
            <uploadImg
              v-if="form.identity_img !== ''"
              flieName="identity_img"
              class="icon_cate"
              :disabled="false"
              :oldImgs="[form.identity_img]"
              :n="1"
              @getFile="getFile"
            />
            <span v-else>暂无</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商户门头照:">
            <uploadImg
              v-if="form.facade_img !== ''"
              flieName="facade_img"
              class="icon_cate"
              :disabled="false"
              :oldImgs="[form.facade_img]"
              :n="1"
              @getFile="getFile"
            />
            <span v-else>暂无</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="合同照:">
            <uploadImg
              v-if="form.contract_img !== ''"
              class="icon_cate"
              :oldImgs="[form.contract_img]"
              :n="1"
              :disabled="false"
              @getFile="getFile"
            />
            <span v-else>暂无</span>
          </el-form-item>
        </el-col>
      </el-row>
      <!--合同照 加盟费-->
      <el-row>
        <el-form-item label="缴费类型:">
          <span v-if="form.vip_shop_pay_type == 1" style="color:#666;font-size:13px;">全额缴费入驻</span>
          <span v-if="form.vip_shop_pay_type == 2" style="color:#666;font-size:13px;">押金缴费入驻</span>
          <span v-if="form.vip_shop_pay_type == 0" style="color:#666;font-size:13px;">无</span>
        </el-form-item>

        <!-- <el-form-item label="缴费类型:" prop="vip_shop_pay_type" v-if="!resId">
          <el-select
            v-model="form.vip_shop_pay_type"
            style="width:160px;"
            size="small"
            placeholder="请选择缴费类型"
          >
            <el-option label="全额缴费入驻" value="1"></el-option>
            <el-option label="押金缴费入驻" value="2"></el-option>
            <el-option label="未缴费" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付流水号:" prop="pay_trade_no" v-if="!resId">
          <el-input v-model="form.pay_trade_no" style="width:320px;"></el-input>
          <span style="color:#999;margin-left:12px;font-size:12px;">如已缴费，请输入对应的支付流水号</span>
        </el-form-item> -->
      </el-row>

      <div class="line"></div>
      <el-row class="picCol">
        <el-col :span="8">
          <el-form-item label="小店类型:">
            {{ form.role_type === 0 ? '小店' : form.role_type === 1 ? '会员店' : '幕后街店' }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺面积:">
            {{ form.shop_area !== "null" ? `${form.shop_area}m²` : ''}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺人数:">
            {{form.shop_clerks !== "null" ? `${form.shop_clerks}人` : ''}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="服务时长:">
        <p>{{ form.service_time_start }} ~ {{ form.service_time_end }}</p>
      </el-form-item>
      <el-form-item prop="is_vip_shop" label="是否会员店:" v-if="!this.resId">
        <p>{{ form.is_vip_shop == 1 ? '是' : '否'}}</p>
      </el-form-item>
      <el-form-item prop="is_vip_shop" label="服务扣点:">
        <p>{{ form.service_rate }}%</p>
      </el-form-item>
      <el-form-item label="小店分类:" prop="category">
        <p>{{ shopType }}</p>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  shopEnterManagerDetailData,
} from '@/api/shopdetail'
import { shopTypeList } from '@/api/goods'
// var autoComplete = null
import uploadImg from '@/components/uploadImg'
export default {
  components: {
    uploadImg
  },
  data() {
    return {
      loading: true,
      uid: 0,
      is_vip_shop: 0,
      paywayList: [
        { id: 1, name: '支付宝' },
        { id: 2, name: '银联' },
        { id: 0, name: '请选择' }
      ],
      statusList: [],
      resId: '',
      type: '',
      audit: '',
      shopType: '',
      form: {
        shop_name: '',
        contact: '',
        phone: '',
        account: '',
        address: '',
        ad_code: '',
        longitude: '',
        latitude: '',
        invitation_mobile: '',
        licence_img: '',
        identity_img: '',
        facade_img: '',
        contract_img: '',
        initial_money: '',
        actual_money: 0,
        wait_money: 0,
        transfer_name: '',
        transfer_way: '',
        shop_area: '',
        shop_clerks: '',
        service_time_start: '',
        service_time_end: '',
        audit_record: [],
        type_id: '',
        examine_status: 0,
        examine_content: '',
        region_id: '',
        region: {
          province_id: '',
          city_id: '',
          area_id: '',
          town_id: ''
        },
        //0 普通  1全额 2押金
        vip_shop_pay_type: '',
        pay_trade_no: '',
        uid: ''
      }
    }
  },

  mounted() {
    this.resId = this.$route.query.cid
    this.type = this.$route.query.type
    this.isWatchOrEdit = this.$route.query.isWatchOrEdit
    this.audit = this.$route.query.audit
    // this.getcommonChilderRegionList(1,0)
    if (this.resId) {
      this.getData()
    } else {
      this.loading = false
    }
  },

  methods: {
    getFile(file) {
      console.log(file)
      this.form[file.name] = file.files.length > 0 ? file.files[0].url : ''
    },
    // //获取入驻审核详情
    // async getshopEnterAuditDetailData() {
    //   let res = await shopEnterAuditDetailData(this.resId)
    //   this.form = res.data
    //   this.loading = false
    // },
    //获取入驻管理详情
    async getshopEnterManagerDetailData() {
      shopEnterManagerDetailData(this.resId).then(res => {
        console.log(res)
        this.form = res.data
        this.loading = false
      })
    },

    //获取小店列表
    async getData() {
      let shopList = await shopTypeList({ keywords: '', page: 1, size: 40 })
      let res = await shopEnterManagerDetailData(this.resId)
      this.form = res.data
      const item = shopList.data.data.find(item => {
        return item.id === this.form.type_id
      })
      this.shopType = item.title
      this.loading = false
    },
    tc() {
      return 'text-align:center; color:#333333; font-size:12px;'
    },
    tccolor() {
      return 'text-align:center;background-color:#f5f5f5; font-size:14px;'
    },
  }
}
</script>
<style scoped>
.shop {
  padding: 20px;
}
.accountBtn {
  margin: 0 10px 0 12px;
}
.account_desc {
  color: blue;
  display: inline-block;
}
.account_desc_failure {
  display: inline-block;
  color: #f4222d;
}
.account_location {
  display: inline-block;
}
#container {
  width: 100%;
  height: 300px;
  margin-top: 16px;
}
.address_row {
  margin-top: 16px;
  padding: 0 20px;
}
.line {
  background-color: #e6e6e6;
  height: 1px;
  width: 100%;
}
.icon_cate {
  float: left;
}
.picCol {
  margin-top: 16px;
}
.note {
  color: #999999;
  font-size: 14px;
}
.paywayinput {
  width: 240px;
  margin-left: 12px;
}
.sub_note {
  color: #999999;
  display: inline-block;
  margin-left: 12px;
}
.text-audit {
  margin-right: 12px;
}
.footer {
  text-align: center;
  margin-top: 12px;
}
.examine {
  margin-top: 12px;
}
/* .note_back {
    margin-top: 10px;
  } */
/* .note_back {
    margin-top: 10px;
  } */
</style>